<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-01-12 14:12:47
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-07-24 17:23:21
 * @Description:
 *
-->

<template>
  <div class="vmTags-ctn">
    <el-row
      v-for="(item, index) in vmTags"
      :key="index"
      style="margin-bottom: 10px"
      type="flex"
      align="middle"
    >
      <span>键</span>
      <el-input
        v-model="vmTags[index].key"
        style="width: 40%; margin: 0 20px 0 10px"
      />
      <span>值</span>
      <el-input
        v-model="vmTags[index].value"
        style="width: 40%; margin: 0 20px 0 10px"
      />
      <i
        style="font-size: 20px; cursor: pointer"
        class="el-icon-delete grey"
        @click="deleteVmTag(index)"
      ></i>
    </el-row>
    <i
      style="font-size: 28px; line-height: 40px; cursor: pointer"
      class="el-icon-circle-plus-outline"
      @click="addVmTag"
    ></i>
  </div>
</template>

<script>
export default {
  name: 'VmTags',
  components: {},
  props: {
    vmTags: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    /**
     * @description: 添加标签
     * @return {*}
     */
    addVmTag() {
      // 添加空数据占位
      const vmTags = JSON.parse(JSON.stringify(this.vmTags))
      vmTags.push({
        key: '',
        value: ''
      })
      this.$emit('update:vmTags', vmTags)
    },
    /**
     * @description: 删除标签
     * @param {*} index
     * @return {*}
     */
    deleteVmTag(index) {
      this.vmTags.splice(index, 1)
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.vmTags-ctn {
  .item {
    display: inline-block;
    width: calc(50% - 12.5px);
    &.right {
      margin-left: 25px;
    }
  }
  .hint {
    display: inline-flex;
    .icon {
      color: #b9b9b9;
      font-size: 18px;
      margin-right: 3px;
      line-height: 18px;
    }
    .text {
      .textStyle(13px , 400, #C3C3C3);
      line-height: 18px;
    }
  }
}
</style>
